<template>
  <div class="bg-white border border-custom-border overflow-hidden cursor-pointer rounded-[6px]"
       v-for="item in cardData" :key="item.id" @click="handleCardClick(item)">
    <div class="w-full h-[172px] bg-no-repeat bg-center"
    style="background-size: contain;"
         :style="'background-image: url(' + item.cover + ');'">
      <span
          v-if="item.status"
          class="text-white text-sm px-2 py-0.5 bg-gradient-to-r h-6 w-14 rounded-[4px] mr-1"
          :class="statusColor(item.status)">
        {{ statusText(item.status) }}
      </span>
    </div>
    <div class="px-4 py-4">
      <div class="flex items-center justify-between">
        <span class="text-custom-text text-base font-semibold">{{ item.name }}</span>
        <span v-if="userInfo.user_type != 1 && userInfo.user_type != 0" class="text-base" :class="levelColor(item.level)">{{ item.level }}级</span>
      </div>
      <div class="mt-2 flex items-center justify-between">
        <p class="card-content-item">总分: <span class="text-custom-text/65">{{ item.score }}</span></p>
        <p class="card-content-item">建议时长: <span class="text-custom-text/65">{{item.duration}}分钟</span></p>
      </div>
      <p class="card-content-item" v-if="cardType == '1'">上次考核：<span class="text-custom-text/65">{{ item.last_exam_time || '-' }}</span></p>
      <p class="card-content-item" v-if="cardType == '2'">考核更新: <span class="text-custom-text/65">{{ item.update_date || '-' }}</span></p>
    </div>
  </div>
</template>
<script setup>
import { computed, toRefs } from 'vue'
import {useUserStore} from "@/stores/user.js";
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const props = defineProps({
  cardData: {
    type: Array,
    default: []
  },
  cardType: {
    type: String,
    default: '1'
  }
})
const emit = defineEmits(['cardClick'])
const handleCardClick = (id) => {
  emit('cardClick', id)
}
const { cardData } = toRefs(props)
const statusColor = computed(() => (status) => {
  if (userInfo.value.user_type == 0 || userInfo.value.user_type == 1){
    if (status === '0') {
      return 'from-[#F4E377] to-[#FA9600]'
    } else if (status === '1') {
      return 'from-[#69E3AC] to-[#19B21E]'
    } else if (status === '2') {
      return 'from-[#E4E3E3] to-[#7D7D7D]'
    }
  }else {
    if (status === '1') {
      return 'from-[#F4E377] to-[#FA9600]'
    } else if (status === '3') {
      return 'from-[#69E3AC] to-[#19B21E]'
    } else if (status === '0') {
      return 'from-[#E4E3E3] to-[#7D7D7D]'
    }
  }
})
const statusText = computed(() => (status) => {
  if (userInfo.value.user_type == 0 || userInfo.value.user_type == 1) {
    if (status === '0') {
      return '未完成'
    } else if (status === '1') {
      return '已完成'
    } else if (status === '2') {
      return '未考核'
    }
  }else {
    if (status === '0') {
      return '草稿'
    } else if (status === '1') {
      return '审核中'
    } else if (status === '3') {
      return '已通过'
    }
  }
})
const levelColor = computed(() => (level) => {
  if (level === 'A') {
    return 'text-[#FC474C]'
  } else if (level === 'B') {
    return 'text-[#FA9600]'
  } else if (level === 'C') {
    return 'text-[#19B21E]'
  }
})

</script>